<template>
	<view class="page">
		<view class="list_warp">
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">型号</view>
					<view class="en">
						تىپ نومۇرى
					</view>
				</view>
				<view class="list_right">
					  <picker @change="bindPickerChange" :value="index" :range-key="'name'" :range="array">
					                <view v-if="index>-1" class="uni-input">{{array[index].name}}</view>
									<view v-else class="chonsebtn">
										<view class="icon_left">
											<view class="c_text">请选择类型</view>
											<view class="en">
												تىپ نومۇرىنى تاللاڭ
											</view>
										</view>
										<uni-icons size="14" type="arrowdown"></uni-icons>
									</view>
					    </picker>
				</view>
			</view>
			
			<!-- 数量 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">数量</view>
					<view class="en">
						تىپ نومۇرى
					</view>
				</view>
				<view class="list_right">
					<view @click="reduce" class="reduce publicbg">
						<text>-</text>
					</view>
					<view class="count publicbg">{{count}}L</view>
					<view @click="add" class="add publicbg">
						<uni-icons type="plusempty" color="#333" size="16"> </uni-icons>
					</view>
				</view>
			</view>
			<!-- 单价 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">单价</view>
					<view class="en">
						يەككە باھا
					</view>
				</view>
				<view class="list_right">
					￥{{price}}/L
				</view>
			</view>
			<!-- 价格 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">价格</view>
					<view class="en">
						باھا
					</view>
				</view>
				<view class=" redcolor">
					<view class="c_text">
						总计:￥{{count*price.toFixed(2)}}
					</view>
					<view class="en">
						جەمئىي
					</view>
				</view>
			</view>
			<!-- 联系人 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">联系人</view>
					<view class="en">
						ئالاقىلاشقۇچى
					</view>
				</view>
				<view class="r_info">
					<input type="text" v-model="name" placeholder="请输入姓名" />
					<view class="en">
						ئىسىم - فامىلىڭىزنى كىرگۈزۈڭ
					</view>
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">联系电话</view>
					<view class="en">
						ئالاقىلىشىش تېلېفون نومۇرى
					</view>
				</view>
				<view class="r_info">
					<input type="text" v-model="phone" placeholder="请输入电话" />
					<view class="en">
						تېلېفون كىرگۈزۈڭ
					</view>
				</view>
			</view>
			<!-- 地址 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">配送地址</view>
					<view class="en">
						يەتكۈزۈپ بېرىش ئادرېسى
					</view>
				</view>
				<view class="address">
					<view  class="adsleft">
						<Kregion :regionStr="regionStrval" @region='region'/>
						<view class="en">
							ئۆلكە، شەھەر، ئاپتونوم رايوننى تاللاڭ.
						</view>
					</view>
					<uni-icons size="14" type="forward"></uni-icons>
				</view>
			</view>
			<!-- 详细地址 -->
			<view class="detailads">
				<input type="text" v-model="detailads" placeholder="请填写详细地址(街道、楼牌号等)" />
				<view class="en">
					تەپسىلىي ئادرېسىنى تولدۇرۇڭ ( كوچا، بىنا نومۇرى قاتارلىق )
				</view>
			</view>
			<!-- 定位当前位置 -->
			<view class="list_view" @click="getAdress">
				<view class="list_left">
					<view class="c_text">定位当前位置</view>
					<view class="en">
						ئورۇن بەلگىلەش نۆۋەتتىكى ئورنى
					</view>
				</view>
				<view v-model="userAdress" v-if="userAdress">
					
				</view>
				<view  class="list_right" v-else >
					<image class="adsicon" src="../../static/img/address.png" mode=""></image>
					<uni-icons type="forward" color="#333" size="16"> </uni-icons>
				</view>
				
			</view>
			<!-- 发票 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">发票</view>
					<view class="en">
						تالون
					</view>
				</view>
				<view  class="list_right">
					    <switch color='#FFC03C' class="switch" :checked="switchecked" @change="switchChange" />
				</view>
			</view>
			<!-- 发票抬头 -->
			<view v-if="switchecked" class="list_view">
				<view class="list_left">
					<view class="c_text">发票抬头</view>
					<view class="en">
						تالون بېشىنى كۆتۈرۈپ تاللاش
					</view>
				</view>
				<view  class="list_right">
					<uni-icons type="forward" color="#333" size="16"> </uni-icons>
				</view>
			</view>
			<!-- 电子邮件 -->
			<view class="list_view">
				<view class="list_left">
					<view class="c_text">电子邮件</view>
					<view class="en">
						ئېلېكترونلۇق پوچتا ساندۇقى
					</view>
				</view>
				<view class="r_info">
					<input type="text" v-model="email" placeholder="用于向您发送电子行程单" />
					<view class="en">
						سىزگە ئېلېكترونلۇق مۇساپە تالونى
					</view>
				</view>
			</view>
			
		</view>
		<!-- 提交按钮 -->
		<view @click="gopage" class="footer_btn">
			<view class="submit">提 交</view>
			<view class="en">
				تاپشۇرۇش
			</view>
		</view>
	</view>
</template>

<script>
	import Kregion from '@/components/k-region/k-region.vue'
	import app from '@/util/api.js'
	export default{
		data(){
			return{
				userAdress:'',
				index:-1,
				array: [],
				count:1,
				price:7.12,
			    regionStrval:'',
				city:'',
				area:'',
				detailads:'',
				switchecked:false,
				name:'',
				phone:'',
				is_default:false,
				email:"",
				latitude:'99',
				longitude:'100'
			}
		},
		methods:{
				getAdress(){
					uni.chooseLocation({
					    success: function (res) {
							this.latitude = res.latitude;
							this.longitude = res.longitude
							this.userAdress = res.name
					        console.log('位置名称：' + res.name);
					        // console.log('详细地址：' + res.address);
					        // console.log('纬度：' + res.latitude);
					        // console.log('经度：' + res.longitude);
					    }
					});
				},
				getoilsList(){
					app.request('/order/oils_type',{}).then(res=>{
						console.log(res)
						this.array = this.array.concat(res.data)
					})
				},
				bindPickerChange: function(e) {
			            this.index = e.target.value
						this.price = JSON.parse(this.array[this.index].price)
						this.count = 1
			        },
					reduce(){
						if(this.count<=1){
							app.toast('数量最少为1L')
							return
						}
						this.count--
					},
					add(){
						this.count++
					},
					region(arr){
					this.province = arr[0]
					this.city = arr[1]
					this.area = arr[2]
					},
					switchChange(e){
						this.switchecked = e.target.value
					},
					//去支付页面
					gopage(){
						let data = {
							oils_type:this.array[this.index].name,
							unit_price:this.price,
							total_num:this.count,
							total_price:this.price*this.count,
							real_name:this.name,
							user_phone:this.phone,
							province:this.province,
							city:this.city,
							district:this.area,
							detail:this.detailads,
							latitude:this.latitude,
							longitude:this.longitude,
							is_billing:this.switchecked?1:0,
							invoice_id:'',
							email:this.email,
						}
						app.request('/order/create',data,'POST').then(res=>{
							if(res.status==200){
								app.nto('paypage')
							}
							
						})
					}
		},
		components:{
			Kregion
		},
		mounted() {
			
		},
		onLoad() {
			this.getoilsList()
			
		}
	}
</script>

<style scoped>
	.list_view{
		padding: 36rpx 0;
		display: flex;
		border-bottom: 1px solid #eee;
		color: #333333;
		font-size: 30rpx;
	}
	.page{
		padding-bottom: 120rpx;
	}
	.detailads{
		padding: 36rpx 0 50rpx;
		border-bottom: 1px solid #eee;
	}
	.list_warp{
		padding: 0 30rpx;
	}
	.en{
		color: #999999;
		font-size: 20rpx;
		font-family: Adobe Arabic;
	}
	.list_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex: 1;
	}
	.chonsebtn{
		display: flex;
		width: 275rpx;
		align-items: center;
		justify-content: center;
			padding: 6rpx 0;
			border: 1px solid #BFBFBF;
			border-radius: 10rpx;
	}
	.icon_left{
		text-align: left;
		color: #999999;
	
		font-size: 24rpx;
		box-sizing: border-box;
		
	}
	.publicbg{
		height: 50rpx;
		background: #F5F5F5;
		border-radius: 6rpx;
		text-align: center;
		line-height: 50rpx;
		
	}
	.reduce{
		font-size: 47rpx;
		
	}
	.reduce,.add{
		width: 50rpx;
	}
	.count{
		color: #333333;
		font-size: 24rpx;
		margin: 0 8rpx;
		min-width: 70rpx;
		padding: 0 10rpx;
	}
	.redcolor,.redcolor .en{
		color: #DB3634;
	}
	.redcolor{
		margin-left: auto;
	}
	.r_info{
		flex: 1;
		text-align: right;
	}
	.address{
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	.adsleft{
		text-align: right;
	}
	.adsicon{
		width: 30rpx;
		height: 36rpx;
		margin-right: 6rpx;
	}
	.switch{
		transform:scale(0.7)
	}
	.footer_btn{
			box-sizing: border-box;
		  width: 100vw;
		  background-color: #FFC03C;
		  height: 100rpx;
		  padding-top: 14rpx;
	text-align: center;
		  color: #FFFFFF;
		  font-size: 30rpx;
		  position: fixed;
		  bottom: 0;
		 }
		 .footer_btn .en{
		  font-size: 24rpx;
		  color: #fff ;
		 }

</style>
